<template>
  <div class="wrap" v-loading="isSearchLoading">
    <!-- 搜索店铺 -->
    <div class="header">
      <div class="line"></div>
      <div class="Commodity">
        <a @click="commodity = 1">综合排序</a>
        <!-- <a :class="commodity == 1 && 'sel'" @click="commodity = 1">综合排序</a> -->
        <!-- <a :class="commodity == 2 && 'sel'" @click="commodity = 2">销量</a>
        <a :class="commodity == 3 && 'sel'" @click="commodity = 3">信用</a> -->
      </div>
    </div>
    <!-- 店铺内容list -->
    <div v-for="item in shopsList" class="shopsList" :key="item.id">
      <div class="shopsLeft" @click="goShopDetail(item)">
        <div class="shopsTop">
          <img :src="item.image" alt="" height="100px" width="100px" />
          <div class="hardware">
            <p>{{ item.mallName }}</p>
            <p>
              <span>{{ item.provincial }}</span>
              <span>{{ item.area }}</span>
            </p>
          </div>
        </div>
        <p class="praised">{{ item.reviews }}</p>
      </div>
      <div class="shopsRight">
        <div
          v-for="item in item.goodslist"
          class="shopsContent"
          :key="item.id"
          @click="goGoodsDetail(item)"
        >
          <img :src="item.thumb" alt="" height="152px" width="183px" />
          <p>{{ item.name }}</p>
          <p>¥{{ item.priceCurrent / 100 }}/{{ item.unit }}</p>
        </div>
      </div>
    </div>
    <div v-if="(!shopsList || shopsList.length == 0) && !loading" class="wrap">
      <div class="bomContent">
        <img
          alt=""
          height="330px"
          src="../../../../public/images/74.png"
          srcset=""
          width="330px"
        />
        <p>暂时没有搜索到你要找的店铺</p>
      </div>
    </div>
    <!-- <div class="shopsList">
      <div class="shopsLeft">
        <div class="shopsTop">
          <img src="" alt="" width="100px" height="100px" />
          <div class="hardware">
            <p>Qd五金旗舰店</p>
            <p>
              <span>河北</span>
              <span>邯郸</span>
            </p>
          </div>
        </div>
        <p class="praised">好评率:99.3%</p>
      </div>
      <div class="shopsRight">
        <div class="shopsContent">
          <img src="" alt="" width="183px" height="152px" />
          <p>家用锂电钻工具套装</p>
          <p>¥199.00/套</p>
        </div>
        <div class="shopsContent">
          <img src="" alt="" width="183px" height="152px" />
          <p>家用锂电钻工具套装</p>
          <p>¥199.00/套</p>
        </div>
        <div class="shopsContent">
          <img src="" alt="" width="183px" height="152px" />
          <p>家用锂电钻工具套装</p>
          <p>¥199.00/套</p>
        </div>
        <div class="shopsContent">
          <img src="" alt="" width="183px" height="152px" />
          <p>家用锂电钻工具套装</p>
          <p>¥199.00/套</p>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { tMallInfoSalesVolume } from "@/api/mallApi/congLinMall";

export default {
  name: "mallProjectSearchShops", // 搜索店铺

  data() {
    return {
      commodity: 1,
      pageNo: 1,
      pageSize: 20,
      loading: true,
       isSearchLoading: false,
      shopList: [
        {
          shop_id: 1,
          shop_name: "搜猎人艺术生活",
          provincial: "河北",
          area: "邯郸",
          img: require("../../../../public/images/70.png"),
          reviews: "99.3%",
          products: [
            {
              pro_id: 101,
              text: "洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶",
              price: 480,
              num: 1,
              img: require("../../../../public/images/51.png"),
              sum: 480,
            },
            {
              pro_id: 102,
              text: "花露水花露水花露水花露水花露水花露水花露水花露水",
              price: 680,
              num: 1,
              img: require("../../../../public/images/52.png"),
              sum: 680,
            },
            {
              pro_id: 103,
              text: "燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片",
              price: 380,
              num: 1,
              img: require("../../../../public/images/53.png"),
              sum: 380,
            },
            {
              pro_id: 104,
              text: "燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片",
              price: 380,
              num: 1,
              img: require("../../../../public/images/54.png"),
              sum: 380,
            },
          ],
        },
        {
          shop_id: 2,
          shop_name: "卷卷旗舰店",
          provincial: "河北",
          area: "邯郸",
          img: require("../../../../public/images/70.png"),
          reviews: "99.3%",
          products: [
            {
              pro_id: 201,
              text: "剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀",
              price: 580,
              num: 1,
              img: require("../../../../public/images/51.png"),
              sum: 580,
            },
            {
              pro_id: 202,
              text: "卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸",
              price: 780,
              num: 1,
              img: require("../../../../public/images/52.png"),
              sum: 780,
            },
            {
              pro_id: 203,
              text: "卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸",
              price: 780,
              num: 1,
              img: require("../../../../public/images/53.png"),
              sum: 780,
            },
            {
              pro_id: 204,
              text: "卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸",
              price: 780,
              num: 1,
              img: require("../../../../public/images/54.png"),
              sum: 780,
            },
          ],
        },
        {
          shop_id: 3,
          shop_name: "瓜皮的神秘商店",
          provincial: "河北",
          area: "邯郸",
          img: require("../../../../public/images/70.png"),
          reviews: "99.3%",
          products: [
            {
              pro_id: 301,
              text: "眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片",
              price: 180,
              num: 1,
              img: require("../../../../public/images/51.png"),
              sum: 180,
            },
            {
              pro_id: 302,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/52.png"),
              sum: 280,
            },
            {
              pro_id: 303,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/53.png"),
              sum: 280,
            },
            {
              pro_id: 304,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/54.png"),
              sum: 280,
            },
          ],
        },
        {
          shop_id: 4,
          shop_name: "Taoqi五金旗舰店",
          provincial: "河南",
          area: "濮阳",
          img: require("../../../../public/images/70.png"),
          reviews: "99.9%",
          products: [
            {
              pro_id: 301,
              text: "眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片",
              price: 180,
              num: 1,
              img: require("../../../../public/images/51.png"),
              sum: 180,
            },
            {
              pro_id: 302,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/52.png"),
              sum: 280,
            },
            {
              pro_id: 303,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/53.png"),
              sum: 280,
            },
            {
              pro_id: 304,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/54.png"),
              sum: 280,
            },
          ],
        },
        {
          shop_id: 5,
          shop_name: "Taoqi五金旗舰店",
          provincial: "河南",
          area: "商丘",
          img: require("../../../../public/images/70.png"),
          reviews: "99.9%",
          products: [
            {
              pro_id: 301,
              text: "眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片",
              price: 180,
              num: 1,
              img: require("../../../../public/images/51.png"),
              sum: 180,
            },
            {
              pro_id: 302,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/52.png"),
              sum: 280,
            },
            {
              pro_id: 303,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/53.png"),
              sum: 280,
            },
            {
              pro_id: 304,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/54.png"),
              sum: 280,
            },
          ],
        },
        {
          shop_id: 6,
          shop_name: "Qd五金旗舰店",
          provincial: "河南",
          area: "徐春园",
          img: require("../../../../public/images/70.png"),
          reviews: "100%",
          products: [
            {
              pro_id: 301,
              text: "眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片",
              price: 180,
              num: 1,
              img: require("../../../../public/images/51.png"),
              sum: 180,
            },
            {
              pro_id: 302,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/52.png"),
              sum: 280,
            },
            {
              pro_id: 303,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/53.png"),
              sum: 280,
            },
            {
              pro_id: 304,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/54.png"),
              sum: 280,
            },
          ],
        },
        {
          shop_id: 7,
          shop_name: "Qd五金旗舰店",
          provincial: "河南",
          area: "徐春园",
          img: require("../../../../public/images/71.png"),
          reviews: "100%",
          products: [
            {
              pro_id: 301,
              text: "眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片",
              price: 180,
              num: 1,
              img: require("../../../../public/images/51.png"),
              sum: 180,
            },
            {
              pro_id: 302,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/52.png"),
              sum: 280,
            },
            {
              pro_id: 303,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/53.png"),
              sum: 280,
            },
            {
              pro_id: 304,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/54.png"),
              sum: 280,
            },
          ],
        },
        {
          shop_id: 8,
          shop_name: "Qd五金旗舰店",
          provincial: "河南",
          area: "徐春园",
          img: require("../../../../public/images/71.png"),
          reviews: "100%",
          products: [
            {
              pro_id: 301,
              text: "眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片",
              price: 180,
              num: 1,
              img: require("../../../../public/images/51.png"),
              sum: 180,
            },
            {
              pro_id: 302,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/52.png"),
              sum: 280,
            },
            {
              pro_id: 303,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/53.png"),
              sum: 280,
            },
            {
              pro_id: 304,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/54.png"),
              sum: 280,
            },
          ],
        },
        {
          shop_id: 9,
          shop_name: "Qd五金旗舰店",
          provincial: "河南",
          area: "徐春园",
          img: require("../../../../public/images/71.png"),
          reviews: "100%",
          products: [
            {
              pro_id: 301,
              text: "眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片",
              price: 180,
              num: 1,
              img: require("../../../../public/images/51.png"),
              sum: 180,
            },
            {
              pro_id: 302,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/52.png"),
              sum: 280,
            },
            {
              pro_id: 303,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/53.png"),
              sum: 280,
            },
            {
              pro_id: 304,
              text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
              price: 280,
              num: 1,
              img: require("../../../../public/images/54.png"),
              sum: 280,
            },
          ],
        },
      ],
      shopsList: [],
    };
  },

  mounted() {
    this.getSearchShops();
    this.$bus.$on("searchShops", (data) => {
      this.getSearch(data);
    });
  },

  methods: {
    goShopDetail(query) {
      console.log(query.id);
      this.$router.push({
        path: "/mall/storeDetail",
        query,
      });
    },
    goGoodsDetail(query) {
      console.log(query.id);
      this.$router.push({
        path: "/mall/product",
        query,
      });
    },
    getSearch(data) {
      this.isSearchLoading = true;
      const inpurValue = {
        mallName: data,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      tMallInfoSalesVolume(inpurValue).then((res) => {
        this.isSearchLoading = false;
        this.shopsList = res.data.rows;
      });
    },

    getSearchShops() {
      this.loading = true;
      this.isSearchLoading = true;
      const inpurValue = {
        mallName: this.$route.query.searchKey,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      tMallInfoSalesVolume(inpurValue).then((res) => {
        // console.log(res);
        this.shopsList = res.data.rows;
        // console.log(this.goodsList);
        this.isSearchLoading = false;
        this.loading = false;
        console.log(this.shopsList);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bomContent {
  width: 330px;
  height: 530px;
  margin: 0 auto;

  p {
    margin-left: 120px;
  }
}
.header {
  background: #f8f8f8;

  .line {
    width: 100%;
    height: 1px;
    background: #0479db;
  }

  .sel {
    background: white;
    color: orange;
    font-weight: bold;
  }

  .Commodity {
    display: flex;
    line-height: 2em;

    input {
      margin: 0 0.5em;
      border: solid 1px lightgray;
      padding: 6px 12px;
    }

    label {
      color: black !important;
    }

    a {
      padding: 1em 1em;
      min-width: 105px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      box-sizing: border-box;

      &:first-child {
        margin-left: 0 !important;
      }
    }
  }
}

.shopsList {
  width: 100%;
  height: 292px;
  border-bottom: 2px solid #efeeee;
  //   background: red;
  margin-top: 20px;
  display: flex;

  .shopsRight {
    display: flex;
    justify-content: space-between;
    width: 62%;

    .shopsContent {
      width: 183px;
      height: 250px;
      //   background-color: aquamarine;
      box-shadow: 1px 1px 1px 1px #fbfafa;

      p:nth-child(2) {
        font-family: "Source Han Sans CN Medium";
        font-weight: 600;
        font-size: 15px;
        color: #2b2b2b;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      p:nth-child(3) {
        font-family: "Source Han Sans CN Bold";
        font-weight: 700;
        font-size: 20px;
        color: #ff6b00;
      }
    }
  }

  .shopsLeft {
    width: 448px;
    height: 100%;
    // background: #0479db;
    .praised {
      margin-top: 130px;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 14px;
      color: #585858;
    }

    .shopsTop {
      display: flex;

      .hardware {
        margin: -5px;

        p:nth-child(1) {
          font-family: "Source Han Sans CN Bold";
          font-weight: 700;
          font-size: 18px;
          color: #1289ff;
          margin-left: 14px;
        }

        p:nth-child(2) span {
          font-family: "Source Han Sans CN";
          font-weight: 400;
          font-size: 14px;
          margin-left: 15px;
          color: #585858;
        }
      }
    }
  }
}
</style>
